<template>
  <div class="comment-container">
    <div class="filter-container">
      <el-select 
        v-model="pageQuery.status" 
        placeholder="请选择状态" 
        clearable
        style="width: 200px"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="handleQuery">查询</el-button>
    </div>

    <el-table 
      :data="commentList" 
      border 
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="username" label="用户名" width="120" align="center" />
      <el-table-column prop="content" label="评论内容" />
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ formatStatus(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
      <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
      <el-table-column label="操作" width="180" align="center">
        <template #default="{ row }">
          <el-button 
            :disabled="row.status !== 1" 
            type="success" 
            size="small" 
            @click="handleApprove(row.id)"
          >
            审核
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            @click="handleDelete(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageQuery.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageQuery.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination-container"
    />
  </div>
</template>

<script setup>
import { getCommentService } from "@/api/comment/comment";
import { onMounted } from "vue";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'

const commentList = ref([]);
const total = ref(0);
const pageQuery =ref({
  pageNum: 1,
  pageSize: 10,
 
});

const statusOptions = [
  { value: 1, label: '待审核' },
  { value: 2, label: '已通过' },
  { value: 3, label: '已删除' }
]

const formatStatus = (status) => {
  const statusMap = {
    1: '待审核',
    2: '已通过',
    3: '已删除'
  };
  return statusMap[status] || '未知状态';
};

const getStatusTagType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'danger'
  };
  return typeMap[status] || '';
}

const getCommentList = async () => {
  const res = await getCommentService(pageQuery.value);
  commentList.value = res.data.rows;
  total.value = res.data.total;
};

const handleQuery = () => {
  pageQuery.pageNum = 1;
  getCommentList();
};

const handleSizeChange = (val) => {
  pageQuery.pageSize = val;
  getCommentList();
};

const handleCurrentChange = (val) => {
  pageQuery.page = val;
  getCommentList();
};

const handleApprove = (id) => {
  ElMessageBox.confirm('确定要审核通过该评论吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里调用审核API
    ElMessage.success('审核成功');
    getCommentList();
  }).catch(() => {
    ElMessage.info('已取消审核');
  });
};

const handleDelete = (id) => {
  ElMessageBox.confirm('确定要删除该评论吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里调用删除API
    ElMessage.success('删除成功');
    getCommentList();
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

onMounted(() => {
  getCommentList();
});
</script>

<style scoped>
.comment-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.filter-container {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  justify-content: center;
}

.el-table {
  margin-top: 20px;
}

.el-button + .el-button {
  margin-left: 8px;
}
</style>